﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <title>门禁二维码获取1111</title>
  <meta name="renderer"
        content="webkit">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style"
        content="black">
  <meta name="apple-mobile-web-app-capable"
        content="yes">
  <meta name="format-detection"
        content="telephone=no">
  <link rel="stylesheet"
        type="text/css"
        href="http://at.alicdn.com/t/font_680276_p06flaphix.css" />
  <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    line-height: 2;
  }

  li {
    list-style: none;
  }

  html, body {
    height: 100%;
  }

  .code-contail {
    height: 100%;
    overflow: hidden;
    background-color: #58c474;
  }

  .code-title {
    margin-top: 20px;
    margin-bottom: 30px;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .code-title>i {
    margin-right: 6px;
  }


  .code-wepper {
    margin-bottom: 32px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .code-wepper-header {
    position: relative;
    height: 42px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #eee;
    line-height: 42px;
    text-align: center;
    color: #666;
    font-size: 14px;
  }



  .code-wepper-body {
    padding: 10px 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .code-wepper-body>.img {
    width: 50%;
  }

  .code-wepper-body>.img>img {
    display: block;
    width: 100px;
    height: 100px;
    margin: 10px auto;
    background-color: #eee;
  }

  .code-wepper-footer {
    height: 47px;
    background-color: #fff;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
    line-height: 47px;
    text-align: center;
  }

  .code-tip {
    padding: 0 38px;
    color: #fff;
  }

  .code-tip>ul>li {
    padding-left: 21px;
    font-size: 12px;
    position: relative;
    line-height: 20px;
  }

  .code-tip>ul>li::before {
    content: '●';
    width: 16px;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    text-align: center;
  }

  .code-tip>.name {
    line-height: 30px;
  }

  .code-tip>.name>i {
    margin-right: 7px;
    font-size: 16px !important;
  }
  </style>
  <script type="text/javascript"
          src="/jquery.min.js"></script>
  <script type="text/javascript"
          src="/layui.js"></script>
</head>

<body>
  <div class="code-contail">
    <div class="code-title">
      <i class="iconfont icon-dingwei"></i>
      <span>北京云集汇通科技有限公司</span>
    </div>
    <div class="code-wepper">
      <div class="code-wepper-header">
        二维码分享
      </div>
      <div class="code-wepper-body">
        <div class="img">
          <img class="qr"
               src=""
               alt="二维码" />
        </div>
        <div class="img">
          <img class="qr"
               src=""
               alt="二维码" />
        </div>
        <div class="img">
          <img class="qr"
               src=""
               alt="二维码" />
        </div>
        <div class="img">
          <img class="qr"
               src=""
               alt="二维码" />
        </div>
      </div>
      <div class="code-wepper-footer">
        请将二维码对准扫描器适当距离
      </div>
    </div>
    <div class="code-footer">
      <div class="code-tip">
        <p class="name">
          <i class="iconfont icon-tixing"></i>提示
        </p>
        <ul>
          <li>二维码一分钟自动更新，也可进行手动更新;</li>
          <li>点击右上角按钮可以授权分享好友</li>
        </ul>
      </div>
    </div>
  </div>
  <script type="text/javascript">
  //获取路径参数
  getUrlParam = function(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
  };

  var device = {
    baseUrl: "/entrance-guard/api/",
  }
  var layer;
  var interval;
  layui.use(['layer', 'form'], function() {
    layer = layui.layer,
      form = layui.form;
    generate();
    interval = setInterval(polling, 5000)

  });
  </script>
  <script th:inline="javascript">
  var shareId;
  var qrId = "0";

  function generate() {

    shareId = getUrlParam("shareId");
    $.get(device.baseUrl + shareId + '/generate', null, function(data) {
      console.log(data);
      if (data.status == '200' && data.data) {
        var base64 = data.data.resource.replace(/[\r\n]/g, '');
        $(".qr").attr("src", "data:image/png;base64," + base64);
        qrId = data.data.qrId;
      } else if (data.status == '300') {
        layer.msg("链接已过期。", {
          icon: 2,
          time: 5000
        });
        return false;
      } else {
        layer.msg('获取验证码失败，请重试。', {
          icon: 2,
          time: 5000
        });
        return false;
      }
      return true;
    })
  }

  function polling() {
    if (qrId != "0") {
      $.get(device.baseUrl + '/polling?qrId=' + qrId, null, function(data) {
        if (data.status == '200') {
          switch (data.data.status) {
            case "100":
              break;
            case "200":
              layer.msg(data.data.desc, {
                icon: 1,
                time: 5000
              });
              clearInterval(interval);
              break;
            case "300":
            case "403":
              layer.msg(data.data.desc, {
                icon: 2,
                time: 5000
              });
              clearInterval(interval);
              break;
            case "500":
              layer.msg("未知错误", {
                icon: 2,
                time: 5000
              });
              clearInterval(interval);
              break;
          }
        } else {
          layer.msg('获取失败，请重试。', {
            icon: 2,
            time: 5000
          });
        }
      })
    }

  }
  </script>
</body>

</html>